<template>
    <el-main>
        <div style="border-bottom: 1px solid rgb(204, 204, 204);">
            <h3>设备类型</h3>
            <h4 style="margin:15px 0">设备类型列表</h4>
        </div>
        <div style="margin-top: 15px">
            <el-button type="success" @click="add()" round>新增</el-button>
            <el-button type="danger" :disabled="this.multipleSelection.length===0" @click="delDeviceType" round>删除
            </el-button>
            <el-button type="primary" :disabled="this.multipleSelection.length===0||this.multipleSelection.length>1"
                       @click="upd" round>编辑
            </el-button>
            <el-button :disabled="this.multipleSelection.length===0 " @click="start()" type="primary" round>启用</el-button>
            <el-button :disabled="this.multipleSelection.length===0" @click="stop()" type="primary" round>停用</el-button>
            <el-input placeholder="请输入设备类型" size="medium" v-model="DevType.typeName" class="input-with-select"
                      style="margin-left: 900px ;width: 400px;">
                <el-button slot="append" icon="el-icon-search" @click="this.selDeviceType"></el-button>
            </el-input>


        </div>
        <div>
            <!--  新增弹框  -->
            <el-drawer
                    :title="names"
                    :before-close="cancelForm"
                    :visible.sync="dialog"
                    direction="rtl"
                    custom-class="demo-drawer"
                    ref="drawer"
            >
                <div class="demo-drawer__content">
                    <el-form ref="insertDevicetype" :model="insertDevicetype">
                        <el-form-item label="上级类型" style="margin-left: 80px">
                            <el-cascader
                                    size="medium" style="width: 300px"
                                    v-model="insertDevicetype.parentId"
                                    :options="tableData"
                                    :props="propes"
                                    @change="handleChange"
                                    value-key="id"
                                    clearable
                                    expand-trigger="hover"
                                    placeholder="请选择"
                            ></el-cascader>

                        </el-form-item>
                        <el-form-item label="设备类型名称:" style="margin-left: 80px">
                            <el-input size="medium" style="width: 300px"
                                      v-model="insertDevicetype.typeName"></el-input>
                        </el-form-item>
                        <el-form-item label="设备类型编码:" style="margin-left: 80px">
                            <el-input v-model="insertDevicetype.typeCoding" disabled size="medium"
                                      style="width: 300px"
                                      placeholder="系统自动生成"></el-input>
                        </el-form-item>

                        <el-form-item label="状态:" style="margin-left: 100px">
                            <el-radio v-model="insertDevicetype.state" :label=1>启用</el-radio>
                            <el-radio v-model="insertDevicetype.state" :label=2>停用</el-radio>
                        </el-form-item>

                        <el-form-item label="备注:" style="margin-left: 105px">
                            <el-input style="width: 300px" type="textarea"
                                      v-model="insertDevicetype.comment"></el-input>
                        </el-form-item>
                    </el-form>
                    <div class="demo-drawer__footer" style="margin:50px 200px">
                        <el-button class="my-button" @click="cancelForm">取 消</el-button>
                        <el-button class="my-button" type="primary" @click="save(isEdit)" :loading="loading">
                            {{ loading ? '提交中 ...' : '确 定' }}
                        </el-button>
                    </div>
                </div>
            </el-drawer>

        </div>

        <el-table
            ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                row-key="id"
                @selection-change="handleSelectionChange"
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column prop="id" type="" label="序号">
            </el-table-column>
            <el-table-column prop="typeName" label="设备类型名称">
            </el-table-column>
            <el-table-column prop="typeCoding" label="设备类型编码">
            </el-table-column>
            <el-table-column prop="state" label="状态">
                <template slot-scope="scope">
                    <span v-if="scope.row.state === 1">启用</span>
                    <span v-if="scope.row.state === 2">停用</span>
                </template>
            </el-table-column>
            <el-table-column prop="comment" label="备注">
            </el-table-column>
            <el-table-column prop="creator" label="创建人">
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间">
            </el-table-column>
        </el-table>
    </el-main>
</template>

<script>
export default {
    name: "Devicetype",
    data() {

        return {
            //新增数据或修改数据
            insertDevicetype: {
                parentId: 0,//上级类型，父id
                typeName: null,//设备类型名称
                typeCoding: null,//设备类型编码
                state: null,//状态
                comment: null,//备注
                creator: '张三',
            },

            tableData: [],
            multipleSelection: [],//多选框选择数据
            //模糊查数据
            DevType: {
                typeName: '',//搜索框设备类型名称
            },
            propes: {
                value: 'id',
                label: 'typeName',
                children: 'children',
                checkStrictly: true
            },
            defaultProps: {
                children: 'children',
                label: 'typeName'
            },
            names: '',
            dialog: false, //抽屉弹窗开关
            loading: false,
            timer: null,//表单动画所需属性
            isEdit: true,//判断是新增还是修改，true是修改，false为新增


        }
    },
    methods: {

        //提交表单时判断是编辑还是新增
        save(val) {
            if (val) {
                //编辑
                this.updateDeviceType()
            } else {
                //新增
                this.insDeviceType()
            }
            this.selDeviceType()
        },

        //编辑保养项目
        updateDeviceType() {
            this.request.post("/device/device-type/updateDeviceType", this.insertDevicetype)
                .then(res => {
                    console.log(res)
                    if (res.code === '200') {
                        this.dialog = false // 关闭弹窗
                        this.xiugaiOpen1() // 编辑成功通知
                        this.selDeviceType()//调用全查
                    } else {
                        this.xiugaiOpen4() // 编辑失败通知
                        this.dialog = false // 关闭弹窗
                    }
                })
        },
        //添加设备类型
        insDeviceType() {
            console.log(this.insertDevicetype)
            this.request.post("/device/device-type/insDeviceType", this.insertDevicetype)
                .then(res => {
                    console.log(res)
                    if (res.code === '200') {
                        this.dialog = false // 关闭弹窗
                        this.tianjiaOpen1() // 添加成功通知
                        this.selDeviceType()//调用全查
                    } else {
                        this.tianjiaOpen4() // 添加失败通知
                        this.dialog = false // 关闭弹窗
                    }
                })
        },
        //点击新增
        add() {
            this.dialog = true
            this.isEdit = false
            this.names = "新增"
        },
        //点击编辑
        upd() {
            this.dialog = true
            this.isEdit = true
            this.names = "编辑"
            this.mod()
        },

        //启动按钮
        start() {
            // 定义一个空数组用于存储id
            var ids = this.multipleSelection.map(obj => obj.id);
            this.request.post("/device/device-type/startUsing", ids)
                .then(res => {
                    if (res.code === '200') {
                        this.startOpen2() // 启动成功通知
                        this.selDeviceType()//调用全查
                    } else {
                        this.startOpen1()//启动失败通知
                    }
                })
        },
        //停用按钮
        stop() {
            // 定义一个空数组用于存储id
            var ids = this.multipleSelection.map(obj => obj.id);
            this.request.post("/device/device-type/outService", ids)
                .then(res => {
                    if (res.code === '200') {
                        this.stopOpen2() // 停用成功通知
                        this.selDeviceType()//调用全查
                    } else {
                        this.stopOpen1()//停用失败通知
                    }
                })
        },

        //修改信息
        mod() {
            this.insertDevicetype = this.multipleSelection[0]

        },

        // 启动失败通知
        startOpen1() {
            this.$notify.error({
                title: '错误',
                message: '启动失败'
            })
        },
        // 启动成功通知
        startOpen2() {
            this.$notify({
                title: '成功',
                message: '启动成功',
                type: 'success'
            });
        },
        // 停用失败通知
        stopOpen1() {
            this.$notify.error({
                title: '错误',
                message: '停用失败'
            })
        },
        // 停用成功通知
        stopOpen2() {
            this.$notify({
                title: '成功',
                message: '停用成功',
                type: 'success'
            });
        },

        // 编辑成功通知
        xiugaiOpen1() {
            this.$notify({
                title: '成功',
                message: '编辑成功',
                type: 'success'
            });
        },
        // 编辑失败通知
        xiugaiOpen2() {
            this.$notify.error({
                title: '错误',
                message: '编辑失败'
            })
        },
        // 添加成功通知
        tianjiaOpen1() {
            this.$notify({
                title: '成功',
                message: '添加成功',
                type: 'success'
            });
        },
        // 添加失败通知
        tianjiaOpen4() {
            this.$notify.error({
                title: '错误',
                message: '添加失败'
            })
        },
//批量删除
        delDeviceType() {
            console.log(this.multipleSelection)
            this.$confirm('此操作将永久删除该文件,如果选择上级类型则会连同子级一起删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //获取删除对象id

                var ids = this.multipleSelection.map(obj => obj.id);
                console.log(ids)
                this.request.post("device/device-type/delDeviceType", ids
                ).then(res => {
                    if (res.code == '200') {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'

                        });
                        this.selDeviceType()
                    }
                })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        //新增弹窗取消按钮
        cancelForm() {
            this.loading = false;
            this.dialog = false;
            clearTimeout(this.timer);
        },
        //模糊全查类型信息
        selDeviceType() {
            console.log(this.typeName)
            this.request.post("device/device-type/selDeviceType", this.DevType).then(res => {
                this.tableData = res.data
                console.log(this.tableData)

            })
        },
        //将树形结构获取的数组id设置为单层id
        handleChange(value) {
            if (value.length > 0) {
                const selectedNode = this.getNodeById(value[value.length - 1]);
                this.insertDevicetype.parentId = selectedNode.id;
            } else {
                this.insertDevicetype.parentId = null;
            }
        },
        getNodeById(id, nodes = this.tableData) {
            for (let i = 0; i < nodes.length; i++) {
                const node = nodes[i];
                if (node.id === id) {
                    return node;
                }
                if (node.children) {
                    const result = this.getNodeById(id, node.children);
                    if (result) {
                        return result;
                    }
                }
            }
            return null;
        },
        //多选框
        handleSelectionChange(val) {
            this.multipleSelection = val;
        }
    },
    //打开页面默认执行
    created() {
        this.selDeviceType()

    }
}
</script>

<style scoped>
.el-main {
    padding: 0;
}
</style>
